<template>
  <div class="mymember-set-meal-page">
    <div class="mymember-set-meal-page-content">
      <!-- <div class="mymember-vipcity">
        <b class="city" @click="goVipList">{{userArea.vipSelectedCity || setMealInfo.vipCity}}</b><span class="more" @click="checkCityhandle">开通更多<img src="../../assets/img/dynamics/arrow.png" alt=""></span>
      </div> -->
      <div class="vip-open scale-1px-bottom">
        <div class="vip-list">
          <p class="title">开通城市：</p>
          <p class="tips">已开通城市：<span v-if="city.length">{{getVipCity()}}</span><span v-else>暂未开通</span></p>
        </div>
        <div class="vip-action" @click="checkCityhandle">
          {{userArea.vipSelectedCity || setMealInfo.vipCity}}<img src="../../assets/img/dynamics/arrow.png" alt="">
        </div>
      </div>
      <h3 class="classify-title">请选择VIP套餐</h3>
      <ol class="mymember-set-meal-page-content-bottom">
        <li :class="{active:num==index}" v-for="(item,index) in vipList" :key="index" @click="taget(index)">
          <p>{{item.monthNum}}个月</p>
          <div class="price">
            <span>¥</span>
            <p>{{item.subscribeAmount | priceFormart}}</p> 
          </div>
        </li>
      </ol>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    setMealInfo: {
      type: Object,
      default: function() {
        return {
          openCount: 0
        }
      }
    },
    vipList: {
      type: Array,
      default: function() {
        return []
      }
    },
    city: {
      type: Array,
      default: function() {
        return []
      }
    },
    userArea: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data: () => ({
    num: 0,
    siteImg: require('IMG/myMember/location@2x.png')
  }),
  methods: {
    // 获取vip城市
    getVipCity () {
      return this.city.filter(item => item.vipValid).map(item => item.city).join('、').replace(/市/g,'') || '您开通的城市VIP已全部到期'
    },
    checkCityhandle() {
      // if (!this.setMealInfo.vipCity) this.$emit('onCheckCity')
      this.$emit('onCheckCity')
    },
    taget(index) {
      this.num = index
      this.$emit('priceClick', index)
    },
    goVipList () {
      this.$emit('goVipList')
    }
  }
}
</script>
<style lang="less">
.mymember-set-meal-page {
  width: 100%;
  // height: 149px;
  display: flex;
  padding-bottom: 12px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 10px;
  .mymember-set-meal-page-content {
    padding: 17px 16px 0 16px;
    width: 100%;
    .mymember-set-meal-page-content-top {
      display: flex;
      justify-content: space-between;
      .forestall-open {
        font-size: 12px;

        font-weight: 400;
        color: rgba(113, 73, 59, 1);
        line-height: 17px;
      }
      .meal-site {
        display: flex;
        p {
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
          line-height: 16px;
          width: 50px;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
        .site-icon {
          width: 10px;
          height: 12px;
          margin: 2px 0 0 3px;
        }
      }
    }
    .mymember-set-meal-page-content-bottom {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 10px;
      li {
        width: 105px;
        height: 75px;
        margin-top: 16px;
        border-radius: 6px;
        border: 1px solid;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #F2F4F5;
        border-color: #F2F4F5;
        color: #333;
        p:nth-child(1) {
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
        }
        .price {
          display: flex;
          p {
            font-size: 26px;
            font-weight: 600;
          }
          span {
            margin-top: 15px;
            font-size: 11px;
          }
        }
        &.active {
          background: rgba(194, 161, 113, 0.17);
          border-color: #a07e72;
          color: #a07e72;
        }
      }
    }
    .mymember-vipcity{
      font-size: 14px;
      display: flex;
      .city{
        flex: 1;
        font-size: 20px;
        font-weight: 600;
      }
      .more{
        width: 100px;
        color: #007AE6;
        vertical-align: middle;
        text-align: right;
        line-height: 22px;
        img{
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
      }
    }
  }
  .vip-open{
    font-size: 16px;
    display: flex;
    padding-bottom: 20px;
    .vip-list{
      flex: 1;
      .title{
        font-size:18px;
        font-family:'PingFangSC';
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:26px;
      }
      .tips{
        font-size:12px;
        font-family:'PingFangSC';
        font-weight:400;
        color:rgba(156,165,181,1);
        line-height:16px;
      }
    }
    .vip-action{
      height:22px;
      font-size:16px;
      font-family:'PingFangSC';
      font-weight:600;
      color:rgba(0,122,230,1);
      line-height:22px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      img{
        width: 12px;
        height: 12px;
      }
    }
  }
  .classify-title{
    font-size:18px;
    font-family:'PingFangSC';
    font-weight:600;
    color:rgba(51,51,51,1);
    margin-top: 20px;
  }
}
</style>
